<template>
	<view class="action-sheet" :data-active="value">
		<view class="mask" @click="$emit('input', false)" v-if="value"></view>
		<view class="wraper">
			<view class="item" v-for="(v,i) in items" :key="i" @click="actionHandle(i)">{{v.name}}</view>
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			'value':{type:Boolean},
			'items':{type:Array}
		},
		methods:{
			actionHandle(i){
				this.$emit('input', false)
				this.$emit('click', i)
			}
		}
	}
</script>

<style lang="scss">
	.action-sheet{
		position: fixed;
		bottom: -100%;
		transition: all .3s;
		left: 0;
		width: 100%;
		z-index: 999;
		&[data-active="true"]{
			bottom: 0;
		}
		.mask{
			position: fixed;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
		}
		.wraper{
			background: rgba(37,40,51,.9);
			padding: 0 40upx;
			position: relative;
			z-index: 2;
		}
		.item{
			padding: 1.5em 0;
			border-bottom: solid 1px rgba(255,255,255,.1);
			text-align: center;
			&:last-of-type{
				border: 0;
				color: $primary-color;
			}
		}
	}
</style>
